<!-- eslint-disable InnerIPLeak -->
<!-- eslint-disable no-template-curly-in-string -->
<template>
  <div>
    <el-row>
      <h4><b>{{ $t('approverSetup') }}</b></h4>
      <el-radio-group v-model="dataType" @change="changeDataType">
        <el-radio label="USERS">{{ $t('specifyUser') }}</el-radio>
        <el-radio label="APPOINT_EL" v-show="false">{{ $t('expression') }}
          <el-tooltip key="cancelNoticeTip" placement="top-start" @click.stop.prevent>
            <div slot="content" class="flowDesignPropertyInputTipBox">
              <p>{{ $t('selectExpMethodTip') }}</p>
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip></el-radio>
        <el-radio label="APPOINT_EL">{{ $t('specifyRole') }}</el-radio>
        <el-radio label="DEPTS" v-show="false">{{ $t('org') }}</el-radio>
        <el-radio label="INITIATOR" v-show="false">{{ $t('sponsor') }}</el-radio>
      </el-radio-group>
    </el-row>
    <el-row>
      <div v-if="dataType === 'USERS'">
        <el-tag v-for="(userText,index) in selectedUser.text" :key="userText" effect="plain" closable
          @close="handleOutSideClose(index)">
          {{ userText }}({{selectedUser.ids[index]}})
        </el-tag>
        <div class="element-drawer__button">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">{{ $t('addUser') }}
          </el-button>
        </div>
      </div>
      <div v-if="dataType === 'APPOINT_EL'" style="overflow: hidden">
        <el-select
          v-model="roleIds"
          filterable
          multiple
          size="mini"
          :placeholder="$t('pleaseSelectRole')"
          @change="changeSelectRoles">
          <el-option
            v-for="item in roleOptions"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
            :disabled="item.status === 1">
          </el-option>
        </el-select>
      </div>
      <div v-if="dataType === 'DEPTS'">
        <tree-select
          :width="320"
          :height="400"
          size="mini"
          :data="deptTreeData"
          :defaultProps="deptProps"
          multiple
          clearable
          checkStrictly
          nodeKey="id"
          :checkedKeys="deptIds"
          @checked-change="checkedDeptChange">
        </tree-select>
      </div>
      <!-- 以前是指定表达式显示，现在又改成指定角色，所以这块隐藏 -->
      <div v-if="false && dataType === 'APPOINT_EL'">
        <a-input
          v-model="appointEl"
          size="small"
          :placeholder="$t('fillInExpFormatDesc')"
          @blur="changeAppointEl"
          style="font-size:12px;"/>
      </div>
    </el-row>
     <el-row>
      <div>
        <el-divider />
        <h4><b>{{ $t('approvalOperationConfiguration') }}</b></h4>
        <span style="display:flex;
  justify-content: space-between;">
        <p>{{$t('whetherCanForwarded')}}</p>
         <el-switch
          v-model="canTransfer"
          :inactive-value="0"
          :active-value="1"
          active-color="#4388a6"
          inactive-color="#bfbfbf"
          @change="updateCanTansfer">
        </el-switch>
        </span>
        <el-row>
        </el-row>
      </div>
     </el-row>
    <el-row>
      <div v-show="showMultiFlog">
        <el-divider />
        <h4><b>{{ $t('multiInstanceCheckWay') }}</b></h4>
        <el-row>
          <el-radio-group v-model="multiLoopType" @change="changeMultiLoopType">
            <el-row>
              <el-radio label="Null">{{ $t('none') }}</el-radio>
            </el-row>
            <el-row>
              <el-radio label="SequentialMultiInstance">{{ $t('counterSign') }}</el-radio>
            </el-row>
            <el-row>
              <el-radio label="ParallelMultiInstance">{{ $t('orSign') }}</el-radio>
            </el-row>
          </el-radio-group>
        </el-row>
      </div>
    </el-row>

    <!-- 候选用户弹窗 -->
    <el-dialog :title="$t('candidateUsers')" :visible.sync="userOpen" width="70%" append-to-body>
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="7">
          <el-card shadow="never" :body-style="{height:'100%'}">
            <div slot="header">
              <span>{{ $t('orgList') }}</span>
            </div>
            <div class="head-container">
              <el-row :gutter="20" style="margin-bottom:10px">
                <el-col :span="16">
                  <el-select
                    clearable
                    v-model="queryUser"
                    filterable
                    remote
                    placeholder="请输入员工名称或工号"
                    :remote-method="remoteMethod"
                    @clear="searchClear">
                    <el-option
                      v-for="item in searchUserData"
                      :key="item.account"
                      :label="item.name+'('+item.account+')'"
                      :value="item.account">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="8">
                   <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-col>
              </el-row>
              <div>              
                <el-tree
                  class="custom-tree"
                  v-loading="loadingDept"
                  :data="deptOptions"
                  node-key="id"
                  :props="{label:'name',children:'childOrganizations'}"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
                  ref="tree"
                  default-expand-all
                  highlight-current
                  :render-content="renderContent"
                  @node-click="handleNodeClick" />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="17">
          <el-card shadow="never" style="margin-bottom:10px;height:150px" :body-style="{height:'110px',overflowY:'auto'}">
            <div slot="header" class="clearfix">
              <span>已选择用户</span>
            </div>
            <el-tag
              v-for="tag in selectedUserDate"
              :key="tag.id"
              closable
              @close="handleClose(tag)"
              :type="tag.type">
              {{tag.name+'('+tag.account+')'}}
            </el-tag>
          </el-card>
          <div>
            <el-table
              height="22vh"
              ref="multipleTable"
              :data="userTableList"
              :row-key="(row)=>row.id"
              v-loading="loading"
              border
              @select="handlerSelect"
              @select-all="handlerSelectAll"
              >
              <el-table-column type="selection" width="50" :reserve-selection="true" align="center" />
              <el-table-column :label="$t('loginAccount')" align="center" prop="account" />
              <el-table-column :label="$t('userName')" align="center" prop="name" />
              <el-table-column :label="$t('org')" align="center" prop="organizationName" />
              <template slot="empty">
                <loading-state :outsidePosition="true" style="position: unset;" :echartShowStatus="3"></loading-state>
              </template>
            </el-table>
            <pagination
              :total="userTotal"
              :page.sync="pageInfo.pageNo"
              :limit.sync="pageInfo.pageSize"
              @pagination="handlerPagination"
            />
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleTaskUserComplete">{{ $t('sure') }}</el-button>
        <el-button @click="userOpen = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import roleApi from '@/api/modules/system/role'
import orgApi from '@/api/modules/system/org'
import userApi from '@/api/modules/system/user'
import TreeSelect from '@/components/TreeSelect'
import Pagination from '@/components/ElPagination'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
const userTaskForm = {
  dataType: '',
  assignee: '',
  canTransfer:'0',
  candidateUsers: '',
  // 指定角色时绑定的角色id属性
  roleIds: '',
  text: '',
  appointEl: '',
  candidateGroups: ''
}

export default {
  name: 'UserTask',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    id: String,
    // eslint-disable-next-line vue/require-default-prop
    type: String
  },
  components: { TreeSelect, Pagination, QuestionMarkTip, },
  computed: {
    ...mapState({
      treeData: (state) => state.org.treeData
    }),
    formData () {
      return this.$store.state.flowDesign.formData
    }
  },
  data () {
    return {
      queryUser:'',
      searchUserData:[],
      preSelectedIds:[],
      loading: false,
      dataType: 'USERS',
      canTransfer: '0',
      selectedUser: {
        ids: [],
        text: []
      },
      userOpen: false,
      deptName: undefined,
      deptOptions: [],
      deptProps: {
        children: 'children',
        label: 'label'
      },
      deptTempOptions: [],
      userTableList: [],
      userTotal: 0,
      selectedUserDate: [],
      roleOptions: [],
      roleIds: [],
      deptTreeData: [],
      deptIds: [],
      // 查询参数
      queryParams: {
        enabled:1,
        organizationIds: undefined
      },
      showMultiFlog: false,
      isSequential: false,
      multiLoopType: 'Null',
      pageInfo: {
        pageNo: 1,
        pageSize: 10
      },
      loadingDept: false,
      appointEl: '',
      times:0
    }
  },
  watch: {
    id: {
      immediate: true,
      handler () {
        this.bpmnElement = window.bpmnInstances.bpmnElement
        this.$nextTick(() => this.resetTaskForm())
      }
    },
    userOpen(val){
      if(val==false){
        this.times=0
        this.queryUser=''
        this.searchUserData = []
        this.selectedUserDate=[]
      }
    }
  },
  beforeDestroy () {
    this.bpmnElement = null
    this.queryParams = {
      organizationIds: undefined
    }
  },
  methods: {
    searchClear(){
      this.getUserList()
      this.getDeptOptions()
      this.searchUserData = [];
    },
    remoteMethod(query) {
      this.queryUser=query
      if (query !== '') {
        // this.loading = true;
        const params = {
          ...this.queryParams,
          ...this.pageInfo,
          queryStr:query
        }
        userApi.getUserPageData(params).then((res) => {
          this.searchUserData=res.data
        })
      } else {
        this.searchUserData = [];
      }
    },
    handleSearch(){
      this.getDeptOptions()
    },
    updateCanTansfer(val){
      this.canTransfer=val
      userTaskForm.canTransfer = val
      this.updateElementTask()
    },
    // 初始化
    resetTaskForm () {
      let bpmnElementObj = null
      if (this.bpmnElement && this.bpmnElement.businessObject) {
        bpmnElementObj = this.bpmnElement.businessObject
      }
      if (!bpmnElementObj) {
        return
      }
      this.bpmnElement.businessObject = bpmnElementObj
      this.clearOptionsData()
      this.dataType = bpmnElementObj['dataType']
      userTaskForm.dataType = bpmnElementObj['dataType'] || userTaskForm.dataType
      this.canTransfer = Number(bpmnElementObj['canTransfer'] || '0')
      userTaskForm.canTransfer = this.canTransfer
      if (this.dataType === 'USERS') {
        const userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee']
        const userText = bpmnElementObj['text'] || []
        if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
          // this.selectedUser.ids = userIdData.toString().split(',') || userTaskForm.ids
          this.selectedUser.ids = userIdData.toString().split(',') || userTaskForm.ids
          this.selectedUser.text = !!userText && !Array.isArray(userText) ? userText.split(',') : []
          userTaskForm.text = this.selectedUser.text.toString()
          userTaskForm.assignee = this.selectedUser.ids
        } else {
          // this.selectedUser.ids = userTaskForm.ids
          this.selectedUser.text = []
          this.selectedUser.ids = []
          userTaskForm.text = ''
          userTaskForm.assignee = ''
        }
        if (this.selectedUser.ids.length > 1) {
          this.showMultiFlog = true
        }
        this.updateElementTask()
      } else if (this.dataType === 'APPOINT_EL0') {
        this.appointEl = bpmnElementObj['appointEl']
        this.showMultiFlog = true
      } else if (this.dataType === 'APPOINT_EL') {
        this.appointEl = bpmnElementObj['assignee']
        this.canTransfer = Number(bpmnElementObj['canTransfer']) ||'0'
        userTaskForm.canTransfer = this.canTransfer
        this.getRoleOptions()
        const roleIdData = bpmnElementObj['roleIds'] || []
        if (Array.isArray(roleIdData)) {
          this.roleIds = roleIdData
          userTaskForm.roleIds = roleIdData
        } else if (roleIdData && roleIdData.length > 0) {
          this.roleIds = roleIdData.split(',')
          userTaskForm.roleIds = roleIdData.split(',')
        }
        this.updateElementTask()
        this.showMultiFlog = true
      } else if (this.dataType === 'DEPTS') {
        this.getDeptTreeData().then(() => {
          const deptIdData = bpmnElementObj['candidateGroups'] || []
          if (deptIdData && deptIdData.length > 0) {
            this.deptIds = deptIdData.split(',')
          }
        })
        this.showMultiFlog = true
      }
      this.getElementLoop(bpmnElementObj)
    },
    /**
     * 清空选项数据
     */
    clearOptionsData () {
      this.selectedUser.ids = []
      this.selectedUser.text = []
      this.roleIds = []
      this.deptIds = []
      this.appointEl = ''
    },
    /**
     * 跟新节点数据
     */
    updateElementTask () {
      const taskAttr = Object.create(null)
      // eslint-disable-next-line no-restricted-syntax
      for (const key in userTaskForm) {
        taskAttr[key] = userTaskForm[key]
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr)
    },
    /**
     * 查询部门下拉树结构
     */
    getDeptOptions () {
      return new Promise((resolve) => {
        this.deptOptions = []
        this.loadingDept = true
        orgApi.getOrgAllDataWithOmit({queryStr:this.queryUser}).then(response => {
          this.deptTempOptions = response.data
          this.deptOptions = response.data
          if (response.data.length) {
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(response.data[0].id)
              this.handleNodeClick({ id: response.data[0].id })
            })
          }
          resolve()
        }).finally(() => {
          this.loadingDept = false
        })
      })
    },
    /**
     * 查询部门下拉树结构（含部门前缀）
     */
    getDeptTreeData () {
      function refactorTree (data) {
        return data.map(node => {
          const treeData = { id: `DEPT${node.id}`, label: node.name, parentId: node.parentId }
          if (node.childOrganizations && node.childOrganizations.length > 0) {
            treeData.children = refactorTree(node.childOrganizations)
          }
          return treeData
        })
      }
      return new Promise((resolve, reject) => {
        if (!this.deptTreeData || this.deptTreeData.length <= 0) {
          this.getDeptOptions().then(() => {
            this.deptTreeData = refactorTree(this.deptOptions)
            resolve()
          }).catch(() => {
            reject(new Error(''))
          })
        } else {
          resolve()
        }
      })
    },
    /**
     * 查询部门下拉树结构
     */
    getRoleOptions () {
      roleApi.getRoleAllData().then((res) => {
        this.roleOptions = res.data.map((item) => {
          return {
            roleId: item.id,
            roleName: item.name
          }
        })
      })
    },
    handlerPagination () {
      this.getUserList()
    },
    /** 查询用户列表 */
    getUserList () {
      const params = {
        ...this.queryParams,
        ...this.pageInfo,
        queryStr:this.queryUser
      }
      this.loading = true
      this.userTableList = []
      this.times++
      if(this.times==1){
        userApi.getUserPageData({...params,pageSize:10000}).then((res) => {
          const tableData = res.data
          this.$nextTick(()=>{
            tableData.filter((row)=>{
              this.preSelectedIds.forEach((id)=>{
                if(id==row.account){
                  this.selectedUserDate.push(row)
                }
              })
            })
          })
        })
      }
      userApi.getUserPageData(params).then((res) => {
          this.userTableList = res.data
          this.userTotal = res.totalCount
          this.$nextTick(()=>{
            this.$refs.multipleTable.clearSelection()
            this.userTableList.filter((row)=>{
              this.preSelectedIds.forEach((id)=>{
                if(id==row.account){
                  this.$refs.multipleTable.toggleRowSelection(row,true)
                }
              })
            })
          })
        }).finally(()=>{
          this.loading = false
        })
    },
    // 筛选节点
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick (data) {
      this.queryParams.organizationIds = data.id
      this.pageInfo.pageNo = 1
      this.getUserList(data.id)
    },
    //每个父节点统计子节点数量方法
    renderContent(h, { node, data, store }){
      if (data.name.length>10) {
        return (
          <span class="custom-tree-node">
            <el-tooltip class="item" effect="dark" placement="top-start" visible-arrow={false}>
              <div slot="content"><span>{data.name +'（'+data.userSum+'）'}</span></div>
              <span>{data.name +'（'+data.userSum+'）'}</span>
            </el-tooltip>
          </span>
        );
      }else{
        return (
          <span class="custom-tree-node">
            <span>{data.name +'（'+data.userSum+'）'}</span>
          </span>
        );
      }
    },
    // 关闭外部标签
    handleOutSideClose(index){
      if(this.selectedUser.text.length==1){
        this.$message.warning('审批设置为指定用户时，必须选择指定用户')
      }
      this.selectedUser.text.splice(index,1)
      this.selectedUser.ids.splice(index,1)
      if (this.selectedUser.ids.length === 1) {
        // eslint-disable-next-line prefer-destructuring
        userTaskForm.assignee = this.selectedUser.ids[0]
        userTaskForm.text = this.selectedUser.text[0]
        userTaskForm.candidateUsers = null
        this.showMultiFlog = false
        this.multiLoopType = 'Null'
        this.changeMultiLoopType(this.multiLoopType)
      } else {
        userTaskForm.candidateUsers = this.selectedUser.ids.join() || null
        userTaskForm.text = this.selectedUser.text.join() || null
        userTaskForm.assignee = null
        this.showMultiFlog = true
      }
      this.updateElementTask()
    },
    // 关闭标签
    handleClose (tag) {
      const index=this.selectedUserDate.findIndex((item)=>{return item.account==tag.account})
      this.selectedUserDate.splice(index, 1)
      this.preSelectedIds.splice(this.preSelectedIds.indexOf(tag.account), 1);
      this.getUserList()
    },
    //这里是做单项选择与单项反选的 选择：打勾或取消
    handlerSelect(selected, row) {
      if (!this.preSelectedIds.includes(row.account)) {
        // 回显数据里没有本条，把这条加进来(选中)
        this.selectedUserDate.push(row)
        this.preSelectedIds.push(row.account);
      } else {
        // 回显数据里有本条，把这条删除(取消选中)
        const selectedIdsArr=[]
        this.preSelectedIds.forEach((id, index) => {
          if (id === row.account) {
            selectedIdsArr.push(row.account)
            this.selectedUserDate.splice(this.selectedUserDate.findIndex((item)=>{return item.id==id}), 1);
          }
        });
        this.preSelectedIds=this.preSelectedIds.filter(item=>selectedIdsArr.indexOf(item)==-1)
      }
    },
    // 全选、取消全选（原理同上面的单选）
    handlerSelectAll(selected) {
      if (selected.length > 0) {
        selected.forEach((item) => {
          if (!this.preSelectedIds.includes(item.account)) {
            this.preSelectedIds.push(item.account);
            this.selectedUserDate.push(item)
          }
        });
      } else {
        const selectedIdsArr=[]
        this.userTableList.forEach((item) => {
          this.preSelectedIds.forEach((id, index) => {
            if (id === item.account) {
              selectedIdsArr.push(item.account)
              this.selectedUserDate.splice(this.selectedUserDate.findIndex((row)=>{return row.account==item.account}), 1)
            }
          });
        });
        this.preSelectedIds=this.preSelectedIds.filter(item=>selectedIdsArr.indexOf(item)==-1)
      }
    },
    onSelectUsers () {
      this.selectedUserDate = []
      this.$refs.multipleTable && this.$refs.multipleTable.clearSelection()
      this.queryParams.organizationIds = undefined
      this.getDeptOptions()
      this.preSelectedIds=[...this.selectedUser.ids]
      this.userOpen = true
    },
    handleTaskUserComplete () {
      if ((!this.selectedUserDate || this.selectedUserDate.length <= 0)) {
        this.$elMessage.warning(this.$t('pleaseSelectUser'))
        return
      }
      const selectedUserDate0 = this.selectedUserDate || []
      const selectedUserDate = selectedUserDate0
      userTaskForm.dataType = 'USERS'
      this.selectedUser.text = selectedUserDate.map((k) => k.name) || []
      this.selectedUser.ids = selectedUserDate.map((k) => k.account) || []
      if (selectedUserDate.length === 1) {
        // eslint-disable-next-line prefer-destructuring
        const data = selectedUserDate[0]
        userTaskForm.assignee = data.account
        userTaskForm.text = data.name
        userTaskForm.candidateUsers = null
        this.showMultiFlog = false
        this.multiLoopType = 'Null'
        this.changeMultiLoopType(this.multiLoopType)
      } else {
        userTaskForm.candidateUsers = selectedUserDate.map((k) => k.account).join() || null
        userTaskForm.text = selectedUserDate.map((k) => k.name).join() || null
        userTaskForm.assignee = null
        this.showMultiFlog = true
      }
      this.updateElementTask()
      this.userOpen = false
    },
    changeSelectRoles (val) {
      userTaskForm.dataType = 'APPOINT_EL'
      userTaskForm.roleIds = val.join() || null
      const textArr = this.roleOptions.filter((k) => val.indexOf(k.roleId) >= 0)
      userTaskForm.text = null
      if (textArr.length) {
        userTaskForm.text = textArr.map((k) => k.roleName).join()
      }
      this.updateElementTask()
    },
    checkedDeptChange (checkedIds, checkedData) {
      if (checkedIds && checkedIds.length > 0) {
        this.deptIds = checkedIds
      }
      if (checkedData && checkedData.length > 0) {
        userTaskForm.candidateGroups = checkedData.map((k) => k.id).join() || null
        userTaskForm.text = checkedData.map((k) => k.label).join() || null
        this.updateElementTask()
      }
    },
    changeDataType (val) {
      // 清空 userTaskForm 所有属性值
      Object.keys(userTaskForm).forEach((key) => (userTaskForm[key] = null))
      userTaskForm.dataType = val
      if (val === 'USERS') {
        if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
          if (this.selectedUser.ids.length === 1) {
            // eslint-disable-next-line prefer-destructuring
            userTaskForm.assignee = this.selectedUser.ids[0]
          } else {
            userTaskForm.candidateUsers = this.selectedUser.ids.join()
          }
          userTaskForm.text = this.selectedUser.text ? this.selectedUser.text.join() : null
        }
      } else if (val === 'APPOINT_EL') {
        this.getRoleOptions()
        if (this.roleIds && this.roleIds.length > 0) {
          userTaskForm.roleIds = this.roleIds.join() || null
          const textArr = this.roleOptions.filter((k) => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0)
          if (textArr.length) {
            userTaskForm.text = textArr.map((k) => k.roleName).join() || null
          } else {
            userTaskForm.text = null
          }
        }
      } else if (val === 'DEPTS') {
        this.getDeptTreeData()
        if (this.deptIds && this.deptIds.length > 0) {
          userTaskForm.candidateGroups = this.deptIds.join() || null
          const textArr = []
          const treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData))
          this.deptIds.forEach((id) => {
            let stark = []
            stark = stark.concat(treeStarkData)
            while (stark.length) {
              const temp = stark.shift()
              if (temp.children) {
                stark = temp.children.concat(stark)
              }
              if (id === temp.id) {
                textArr.push(temp)
              }
            }
          })
          if (textArr.length) {
            userTaskForm.text = textArr.map((k) => k.roleName).join() || null
          } else {
            userTaskForm.text = null
          }
        }
      } else if (val === 'INITIATOR') {
        // eslint-disable-next-line no-template-curly-in-string
        userTaskForm.assignee = '${initiator}'
        userTaskForm.text = '流程发起人'
      } else if (val === 'APPOINT_EL0') {
        userTaskForm.appointEl = this.appointEl
      }
      this.updateElementTask()
      // eslint-disable-next-line max-len
      if (val === 'APPOINT_EL' || val === 'ROLES' || val === 'DEPTS' || (val === 'USERS' && this.selectedUser.ids.length > 1)) {
        this.showMultiFlog = true
      } else {
        this.showMultiFlog = false
      }
      this.multiLoopType = 'Null'
      this.changeMultiLoopType(this.multiLoopType)
    },
    getElementLoop (businessObject) {
      if (!businessObject.loopCharacteristics) {
        this.multiLoopType = 'Null'
        return
      }
      this.isSequential = businessObject.loopCharacteristics.isSequential
      if (businessObject.loopCharacteristics.completionCondition) {
        if (
          // eslint-disable-next-line no-template-curly-in-string
          businessObject.loopCharacteristics.completionCondition.body === '${nrOfCompletedInstances >= nrOfInstances}'
        ) {
          this.multiLoopType = 'SequentialMultiInstance'
        } else {
          this.multiLoopType = 'ParallelMultiInstance'
        }
      }
    },
    changeMultiLoopType (type) {
      // 取消多实例配置
      if (type === 'Null') {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null,assignee: null })
        return
      }
      this.multiLoopInstance = window.bpmnInstances.moddle.create('bpmn:MultiInstanceLoopCharacteristics', {
        isSequential: this.isSequential
      })
      // 更新多实例配置
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
        loopCharacteristics: this.multiLoopInstance,
        // eslint-disable-next-line no-template-curly-in-string
        assignee: '${assignee}'
      })
      // 完成条件
      let completionCondition = null
      // 会签
      if (type === 'SequentialMultiInstance') {
        completionCondition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
          // eslint-disable-next-line no-template-curly-in-string
          body: '${nrOfCompletedInstances >= nrOfInstances}'
        })
      }
      // 或签
      if (type === 'ParallelMultiInstance') {
        completionCondition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
          // eslint-disable-next-line no-template-curly-in-string
          body: '${nrOfCompletedInstances > 0}'
        })
      }
      // 更新模块属性信息
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
        // eslint-disable-next-line no-template-curly-in-string
        collection: '${multiInstanceHandler.getUserIds(execution)}',
        elementVariable: 'assignee',
        completionCondition
      })
    },
    changeAppointEl () {
      userTaskForm.appointEl = this.appointEl
      this.updateElementTask()
    }
  }
}
</script>

<style scoped lang="less">
.el-row .el-radio-group {
  margin-bottom: 15px;

  .el-radio {
    line-height: 28px;
  }
}

.el-tag {
  margin-bottom: 10px;

  +.el-tag {
    margin-left: 10px;
  }
}

.custom-label {
  padding-left: 5px;
  font-weight: 500;
  font-size: 14px;
  color: #606266;
}

.custom-tree{
  overflow:auto;
  height:32vh
}
::v-deep .custom-tree>.el-tree-node {
  display: inline-block;
  min-width: 100%;
}

//弹出层的高度
::v-deep .el-dialog.import-dialog{
  max-height: 65vh;
  overflow-y: auto;
}
//弹出层里内容的高度
::v-deep .el-dialog__body{
  max-height: 60vh !important;
  overflow-y: auto;
}

::v-deep .pagination-container{
  padding:10px 0 0 10px
}
</style>
